<script type="text/javascript" src="<?= base_url() . 'resource/js/layer/layer.js' ?>" charset="utf-8"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
    $(function(){
        $("select[data-edit-select]").filterSelect();
    });
</script>

<!--菜单 start-->
<?php $this->load->view('defaults/common/left');?>
<!--菜单 end-->
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <h1><?=lang('menu_yhgl')?></h1>
      <?=$this->breadcrumb->generateHTML();?>
    </div>
  </div>
  <div class="container-fluid">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i>自动同意报价额度设置</h3>
      </div>
      <div class="panel-body" id="contents">
        <div class="well" style="padding:0 19px;">
          <div class="row">
           <form action="<?= blang_url('users/member/AutoAgreeQuota') ?>" method="get" name="searchform">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">客户</label>
                        <select class="form-control" name="customer_id" data-edit-select="1">
                            <option value="">--客户--</option>
                            <option v-for="item in customers" v-bind:value="item.id" :selected="item.id==search.customer_id">{{item.name_ch}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">产品类型</label>
                        <select class="form-control" name="product_category_id" data-edit-select="1">
                            <option value="">--产品类型--</option>
                            <option v-for="item in product_cats" v-bind:value="item.id" :selected="item.id==search.product_category_id">{{item.name_ch}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group" style="padding-top:37px;">
                        <input class="btn btn-primary" type="submit" name="searchSubmit" value="查询"/>
                        <button  class="btn btn-oms" style="margin: 0 0 0 10px;" type="button" v-on:click="addSetting">额度设置</button>
                    </div>
                </div>
            </form>
          </div>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-hover oms-table">
              <thead>
                <tr>
                    <th class="text-left">客户ID</th>
                    <th class="text-left">客户</th>
                    <th class="text-left">产品类型</th>
                    <th class="text-left">自动同意报价额度（USD）</th>
                    <th class="text-right">添加时间</th>
                    <th class="text-right">上次修改时间</th>
                    <th class="text-right" style="width:10%;">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list" :id="'auto-agree-quota-tr-' + item.id">
                    <td class="text-left">{{item.customer_id}}</td>
                    <td class="text-left">{{item.cu_name_ch}}</td>
                    <td class="text-left">{{item.pcat_name_ch}}</td>
                    <td class="text-left">
                        <input type="text" min="0.01" max="9999.99" step="0.01" name="amount" v-model="item.amount" disabled :style="{width:'80px'}">
                        ({{item.currency_code}})
                    </td>
                    <td class="text-right">{{item.create_at}}</td>
                    <td class="text-right">{{item.update_at}}</td>
                    <td class="text-right">
                        <a class="btn btn-primary btn-sm" href="javascript:void(0)" lock="1" @click="edit(item.id, $event)">修改额度</a>
                        <a class="btn btn-danger btn-sm" :href="'<?= blang_url('users/member/AutoAgreeQuotaDel') ?>?id=' + item.id"
                           onclick="return confirm('您确定要删除吗?')" itle="<?= lang('btnDelete') ?>"><i class="fa fa-trash-o"></i></a>
                    </td>

                </tr>
                 <tr v-if="isEmpty">
                    <td colspan="7" class="emptyNumber"><?=lang('public_mygdsj')?>....</td>
                </tr>
            </tbody>
            </table>
            <?php if($show_pages):?>
            <div class="page">
                <?=$show_pages?>
            </div>
            <?php endif;?>
        </div>
      </div>
    </div>
    </div>

    <script type="text/javascript">
~function(){
    var customers = <?= json_encode($customers) ?>;
    var product_cats = <?= json_encode($product_cats) ?>;
    var list = <?= json_encode($list) ?>;
    var search = <?= json_encode($search) ?>;
    var vm = new Vue({
        el:'#contents',
        data:{
            isEmpty:$.isEmptyObject(list),
            customers:customers,
            product_cats:product_cats,
            list:list,
            search:search
        },
        methods:{
            addSetting:addSetting,
            edit:edit
        }
    });

    function addSetting(e){
        var url = '<?= blang_url('users/member/AutoAgreeQuotaAdd/') ?>';
        $.get(url, {}, function(response){
            var index = layer.open({
                id:'addSetting-modal',
                title:'电商客户自动同意报价额度设置：',
                type: 1,
                btn:['提交'],
                area: ['650px', '500px'],
                content: response,
                yes:function(){
                    $('#layui-layer'+index).find('form').submit();
                }
            });
        });
    }
    function edit(id, e) {
        var btn = e.currentTarget;
        var sel = '#auto-agree-quota-tr-' + id;
        if (btn.getAttribute('lock') == 1) {
            btn.setAttribute('lock', 0);
            btn._old = {
                innerText:btn.innerText
            };
            $(sel).find('input').prop('disabled', false);
            btn.innerText = '保存';
        }else{
            var data = {id:id};
            $(sel).find('input').each(function(){
                if($(this).attr('name')){
                    data[$(this).attr('name')] = $(this).val();
                }
            });
            if(data.amount < 0.01 || data.amount > 9999){
                layer.msg('请输入正确的额度');
                return false;
            }
            //发送修改
            $.ajax({
                url:'<?= blang_url('users/member/AutoAgreeQuotaEdit/') ?>',
                data:data,
                type:'post',
                success:function(response){
                    layer.msg(response.message);
                    if(response.success){
                        btn.innerText = btn._old.innerText;
                        btn.style.color = btn._old.color;
                        btn.setAttribute('lock', 1);
                        $(sel).find('input').prop('disabled', true);
                    }else{

                    }
                }
            });
        }

    }

}();


$(document).on('keypress','input[name="amount"]',function(e){
    e.which = e.which || e.keyCode || e.charCode;
    if ( ((e.which > 47) && (e.which < 58)) || (e.which == 8) || (e.which == 46) || (e.which == 37) || (e.which == 39)) {
        var tmp = $(this).val().split('.');
        if(tmp.length == 2 && e.which == 46){
            return false;
        }
        return true; 
    } else { 
        return false;
    }
});

$(document).on('keyup','input[name="amount"]',function(e){
    var val = old = $(this).val();
    val = val.replace(/[^\d\.]/g, '');
    if (val.indexOf('.') > -1) {
        val = val.substr(0, val.indexOf('.') + 3);
    }
    var tmp = val.split('.');
    var max = parseInt($(this).attr('max'));
    if(parseInt(tmp[0]) > max){
        tmp[0] = tmp[0].substr(0, max.toString().length);
    }
    val = tmp.length > 1 ? (tmp[0]+'.'+tmp[1]) : tmp[0]; 
    if(val != old) $(this).val(val);
});

$(document).on('blur','input[name="amount"]',function(e){
    var regx = /^((0)|([1-9][0-9]*))(\.\d{0,2})?$/i;
    var min = $(this).attr('min');
    var max = $(this).attr('max');
    var value = parseFloat($(this).val());
    if (isNaN(value)) {
        value = min ? parseFloat(min) : 0.00;
    }
    if (!regx.test(value)) {
        layer.msg('额度只能是2位浮点数');
        // this.value = value.toFixed(2);
        // return false;
    }
    if(min !== 'undefind' && min !== '' && value < min){
        layer.msg('数值不能小于'+min);
        this.value = parseFloat(min).toFixed(2);
        return false;
    }
    if(max !== 'undefind' && max !== '' && value > max){
        layer.msg('数值不能大于'+max);
        this.value = parseFloat(max).toFixed(2);
        return false;
    }
    this.value = value.toFixed(2);
});

</script>
</div>
